<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>BI Component - Orgnization Heirarchy</title>
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/style_reset.css" />
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/comp_organization.css" />
    <!--[if IE 8]><link rel="stylesheet" type="text/css" href="../../theme/css/style-ie8.css" /><![endif]-->
    <!--[if IE 9]><link rel="stylesheet" type="text/css" href="../../theme/css/style-ie9.css" /><![endif]-->
    <link rel="Stylesheet" type="text/css" href="api/js/skin-vista/ui.dynatree.css" />

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="../../api/js/jquery.cookie.js"></script>
    <script type="text/JavaScript" src="../../<%=theme%>/script/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../../api/js/jquery.dynatree.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
    <script type="text/javascript">
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            varname: "",
            value: undefined,
            height:"50%"
        };
        window.onload = function () {
            //sample registeration for an event
            //register listener function for an event
        }
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //example to set property values to dom elements
            refreshProperties();
            //load the tree
            user_org();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
        };
    </script>

    <script type="text/javascript">
        var selectedVariable = [];
        // $.ui.dynatree.nodedatadefaults["icon"] = false; // Turn off icons by default
        function user_org() {
            $(".hierarchy").dynatree({
                initAjax: {
                    //       <%--                    url: "org_hier_full2.xml"--%>
                    url: "../../model/Org_hier_list.json"
                },
                onSelect: function(select, node) {
                    if (node.data.isFolder == false)
                    {
                       getSelectedValues();
                    }
                },
                minExpandLevel: 3,
                clickFolderMode: 1,
                  checkbox: true,
                selectMode: 3,
                fx: { height: "toggle", duration: 500 },
                onPostInit: function(reloading, error) {
                    if(properties.value)
                        $(".hierarchy").dynatree("getTree").selectKey(properties.value);
                }
            });
        }
        $(document).ready(function () {
            user_org();
            var textbox = $(this);
            $('a.search').click(function () {
                var tree = $('.hierarchy').dynatree("getTree");
                var matches = [];
                var nodeKey = $('.search-text').val().toLowerCase();
                tree.visit(function (node) {

                    node.data.addClass = '';
                    if (node.data.title.toLowerCase().indexOf(nodeKey) > -1) {
                        node.makeVisible();
                        node.data.addClass = 'highlight';
                        matches.push(node);
                    }
                });
                if (node === null) {
                   // alert("Not Found");
                    BOI.BOILib.Util.log('Not Found',true);
                }
                if(matches.length>0){
                    var node = matches[0];
                    current_match = 0;
                    var matchLi = node.li;
                    $('.dynatree-container').animate({
                        scrollTop: $(matchLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
                    }, 'slow');
                    tree.activateKey(node.data.key);
                    textbox.focus();
                }
            });
        });
        function getVnam(){
            vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
            return vname;
        }
        function resetSelections(){
            $('.hierarchy').dynatree("getRoot").visit(function(node){
              node.select(false);
            });
            properties.value ="";
            properties.variable.value="";
            BOI.context.variables[this.name].value="";
            selectedVariable = [];
        }
        function getSelectedValues() {
        var varname=[];
            var selKeys = $('.hierarchy').dynatree("getSelectedNodes");
            for (var i in selKeys) {
                selectedVariable.push(selKeys[i].data.key);
                properties.value=selectedVariable;
            }
           // BOI.Events.raiseEvent(BOI.Events.varchange, [varname, selectedVariable]);
        }
    </script>
</head>
<body>
<div class="org-menu">
    <div class="org-search">
        <p>
            Org Code:
            <input class="search-text" type="text" name="searchKey" />
        </p>
        <a class="search">Search</a>
        <div class="clear"></div>
    </div>
    <div class="hierarchy">
    </div>
</div>
</body>
</html>